.countries_block {
  height: 120px;
  background:
    image-url('backgrounds/bkg_countries_block_up.png') no-repeat 0 center,
    image-url('backgrounds/bkg_countries_block_down.png') repeat-x;
  margin: 40px 0 0;

  .header-title {
    font-size: 29px;
    line-height: 120px;
    color: #fff;
    text-align: center;


    a:hover {
      text-decoration: underline;
    }
  }
  span{
    color: darken($cGreen, 5%);
  }
}

.jspScrollable {
  overflow: auto !important;
}

.countries_list_index {
  @extend .clearfix;

  @include display-flex();
  @include flex-wrap(wrap);
  @include justify-content(center);
  @include align-content(center);
  margin: 0 auto 85px;
}

@media only screen and (max-width: 480px) {
  .countries_list_index {
    .country {
      &:first-of-type a {
        border-top: 0;
      }

      a {
        width: 100%;
        margin: 0;
        padding: 0;
        height: 80px;
      }

      a:hover {
        svg {
          top: 0;
        }
        .country-content {
          top: 0;
          left: 20px;
          right: 0;
        }
      }

      .country-content, svg {
        top: 0;
        margin-left: 20px;
        right: 0;
        display: table;
        max-width: 60%;
        height: 100%;

        path {
          transform: scale(0.4);
          -webkit-transform: scale(0.4);
        }

        h3 {
          font-size: 20px;
          text-align: left;
          position: relative;
          left: -18px;
          color: #333;
          display: table-cell;
          vertical-align: middle;
          height: 100%;
        }
      }

      a svg {
        margin-top: 10px;
        left: 68%;
        width: 84px;
      }
    }
  }
}

.countries_list {
  @extend .clearfix;

  @include display-flex();
  @include flex-wrap(wrap);
  @include justify-content(center);
  @include align-content(center);

  margin-bottom: 50px;
}

@media only screen and (max-width: 480px) {
  .countries_list {
    margin-bottom: 0;
  }
}

.disclaimer {
  margin-top: 40px;
  font-style: italic;
  line-height: 1.4;

  color: #666666;
  @include clearfix;
}

// SEARCH BOX
.search-countries-box{
  margin: 20px auto;
  position: relative;
  clear: both;
  @extend .clearfix;
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    width: 30px;
    height: 30px;
    background: image-url('countries/search.svg') no-repeat center;
    background-size: contain;
    @include translate(0, -50%);
    visibility: visible;
  }
  input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    padding: 10px;
    padding-left: 50px;
    margin: 0;
    border-radius: 3px;
    font-size: 29px;
    background: #FFF;
    color: #666;
    border: 1px solid rgba(0, 0, 0, 0.1);
    min-height: 20px;
    outline: none;
    font-family: inherit;
    font-weight: 300;
    @media only screen and (max-width: 768px) {
      font-size: 20px;
    }
    &.is-active{
      background: rgba($cGreen1,0.3);
    }
    &::-webkit-input-placeholder {
       color: #666;
    }

    &:-moz-placeholder { /* Firefox 18- */
       color: #666;
    }

    &::-moz-placeholder {  /* Firefox 19+ */
       color: #666;
    }

    &:-ms-input-placeholder {
       color: #666;
    }
  }
}

@media only screen and (max-width: 480px) {
  .countries-rankings-btn {
    float: none;
    top: auto;
    margin: 0 20px;
    width: 275px;
  }

  .search-countries-box {
    margin-right: 20px;
    margin-left: 20px;
  }
}

.country-warning {
  text-align: center;
  font-size: 18px;
  padding: 20px;
  color: $cGreen;
  @media only screen and (max-width: 480px) {
    font-size: 16px;
    padding: 40px 20px 20px;
    text-align: left;
    &.no-pad {
      padding: 0px 20px 20px;
    }
  }
}
